<template>
  <div>
    <AuthComponent></AuthComponent>
     <div>
        <el-button type="primary" @click="goMyBlog">返回我的博客</el-button>
        <el-button type="primary" @click="goCategory">添加分类</el-button>
     </div>
     <div id="category-table">
        <!--分类列表-->
<!--       <div v-for="item in categoryArray" :key="item.id">-->
<!--          {{ item.cgName }}-->
<!--          <el-button type="primary" @click="goCategory(item.id)">编辑</el-button>-->
<!--       </div>-->

       <template>
         <el-table
             border
             :data="categoryArray"
             style="width: 100%">

           <el-table-column
               prop="cgName"
               label="分类名称"
               width="130">
           </el-table-column>
           <el-table-column
               prop="createTime"
               label="创建时间"
               width="160">
           </el-table-column>
           <el-table-column
               prop="updateTime"
               label="修改时间"
               width="160">
           </el-table-column>
           <el-table-column
               label="操作" >
             <template slot-scope="scope">
               <el-button   type="primary" @click="goCategory(scope.row)"   size="small">编辑</el-button>
               <el-button   type="danger" @click="goDelete(scope.row)"   size="small">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </template>



       <div class="block">
         <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="[5, 10, 20]"
             :page-size="pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total">
         </el-pagination>
       </div>
     </div>
  </div>
</template>

<script>
import AuthComponent from "@/components/commen/AuthComponent";

export default {
  name: "CategoryList",
  components: {
    AuthComponent
  },
  data() {
    return {
      categoryArray: [],
      pageSize: 5,
      currentPage: 0,
      total: 0,
      userInfo: {},
    }
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    this.getCategoryList()
  },
  methods: {
    goMyBlog() {
      this.$router.push({ path: `/blog/person/list`})
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getCategoryList()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.getCategoryList()
    },
    getCategoryList() {
      let currentPage = 0;
      if (this.currentPage <= 0) {
        currentPage = 0;
      } else {
        currentPage = this.currentPage - 1;
      }
      this.$http.get("/category/person/list?pageNum="+currentPage+"&pageSize="+this.pageSize, {headers: {token: this.userInfo.token}}).then(res => {
        res = res.data
        if (res.code === 0) {
          res = res.data
          this.categoryArray = res.content
          this.total = res.totalElements;
          this.currentPage = res.number + 1;
        }
      }).catch(err => {

      })
    },
    goCategory(row) {
      this.$router.push({ path: `/category/save/${row.id}`})
    },
    goDelete(row){
      this.$http.get("/category/delete/"+row.id);
      this.getCategoryList();
    }
  }
}
</script>

<style scoped>
#category-table{
  margin-top: 20px;
}
</style>